<template>
  <div class="userinfoPanel">
    <div class="userinfoPanel--header">
      <div class="userinfoPanel--header__title">
        {{snapinfo.location}}
      </div>
      <div class="userinfoPanel--header__subtitle">
        <span>{{snapinfo.date}}</span>
      </div>
    </div>
    <div class="userinfoPanel--content">
      <div class="userinfoPanel--content__left">
        <div class="type">军械库人员通行记录</div>
        <div class="img">
          <!--<img src="@/assets/images/armyScreen/sample2.png">-->
          <img :src="snapinfo.faceUrl" v-if="snapinfo.faceUrl">
          <img src="@/assets/images/armyScreen/默认图片@2x.png" v-else>
          <!--<img src="@/assets/images/armyScreen/默认图片@2x.png">-->
        </div>
        <div class="info">
          <div class="info--item">
            <div class="info--item__icon name"></div>
            <div class="info--item__value">{{snapinfo.person}}</div>
          </div>
          <div class="info--item">
            <div class="info--item__icon date"></div>
            <div class="info--item__value">{{snapinfo.time}}</div>
          </div>
          <div class="info--item">
            <div class="info--item__icon location"></div>
            <div class="info--item__value">{{snapinfo.doorName}}</div>
          </div>
        </div>
      </div>
      <div class="userinfoPanel--content__right">
        <div class="type">军用物资领取人员通行记录</div>
        <div class="recodlist">
          <div class="recodlist--item" v-for="(item,index) in snapinfo.snapList" :key="item.snapUrl + index">
            <!--<img src="@/assets/images/armyScreen/切图-bg@1x.png">-->
            <img :src="item.snapUrl">
            <div class="recodlist--item__outer" v-if="item.type === '陌生人'"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  snapinfo: {
    type: Object,
    default() {
      return {
        // "location": "1号库",
        // "date": "2023年10月9日",
        // "person": "刘德华",
        // "faceUrl": "https://10.19.223.31/ngx/proxy?i=aHR0cDovLzEwLjE5LjIyMy4zMTo2MDQwL3BpYz8yZDAwPWJhMDJsYmYtZG80NDFhKjc1Y2IqN281PTlsMj01NTQ1KjU3ODM5NDM9NDExNio9dDcxOSoqcHM9PTUyMSowYjdiNzIxYjQtYWIxMzI4Ni0xMDZvZTctcGkwMGVhPTAwNmQwJkFjY2Vzc0tleUlkPW40VWNZd052cTdxM2hydnQmRXhwaXJlcz0xNjkzNDc0NDU1JlNpZ25hdHVyZT1CcFlhdjJDQlNCbFBGeTN5NWYxcTR3QTMvUXM9",
        // "time": "2023-05-12 12:30:21",
        // "doorName": "1号库门禁机",
        // "snapList": [
        //   {
        //     "snapUrl": "https://10.19.223.31/ngx/proxy?i=aHR0cDovLzEwLjE5LjIyMy4zMTo2MDQwL3BpYz8yZDAwPWJhMDJsYmYtZG80NDFhKjc1Y2IqN281PTlsMj01NTQ1KjU3ODM5NDM9NDExNio9dDcxOSoqcHM9PTUyMSowYjdiNzIxYjQtYWIxMzI4Ni0xMDZvZTctcGkwMGVhPTAwNmQwJkFjY2Vzc0tleUlkPW40VWNZd052cTdxM2hydnQmRXhwaXJlcz0xNjkzNDc0NDU1JlNpZ25hdHVyZT1CcFlhdjJDQlNCbFBGeTN5NWYxcTR3QTMvUXM9",
        //     "type": "陌生人"
        //   },
        //   {
        //     "snapUrl": "https://10.19.223.31/ngx/proxy?i=aHR0cDovLzEwLjE5LjIyMy4zMTo2MDQwL3BpYz8yZDAwPWJhMDJsYmYtZG80NDFhKjc1Y2IqN281PTlsMj01NTQ1KjU3ODM5NDM9NDExNio9dDcxOSoqcHM9PTUyMSowYjdiNzIxYjQtYWIxMzI4Ni0xMDZvZTctcGkwMGVhPTAwNmQwJkFjY2Vzc0tleUlkPW40VWNZd052cTdxM2hydnQmRXhwaXJlcz0xNjkzNDc0NDU1JlNpZ25hdHVyZT1CcFlhdjJDQlNCbFBGeTN5NWYxcTR3QTMvUXM9",
        //     "type": "内部人员"
        //   }
        // ]
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.userinfoPanel {
  width: 400px;
  margin: 0 auto;
  margin-bottom: 24px;

  &--header {
    height: 24px;
    line-height: 24px;
    background-image: linear-gradient(270deg, rgba(17, 85, 152, 0.464) 0%, rgba(0, 163, 250, 0.8) 100%);
    border-radius: 2px;
    padding: 0 11px;

    &__title {
      float: left;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #C9EBFF;
      font-weight: 600;
    }

    &__subtitle {
      float: right;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #D8F0FF;
      letter-spacing: 0;
      font-weight: 500;

      &::before {
        display: inline-block;
        content: '';
        width: 3px;
        height: 16px;
        background-image: linear-gradient(180deg, #00C5FF 0%, #0093FF 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 150, 255, 1);
        box-shadow: 0px 2px 10px 0px rgba(0, 151, 255, 1);
        border-radius: 2px;
        position: relative;
        top: 2px;
      }
      span{
        margin-left: 8px;
      }
    }
  }

  &--content {
    width: 400px;
    height: 220px;
    background: #042252;
    display: flex;
    justify-content: space-between;
    padding: 8px;

    &__left {
      width: 150px;

      .type {
        width: 126px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgb(201, 235, 255, 0.7);
        line-height: 1.5;
        font-weight: 400;

        //border-image: linear-gradient(270deg, rgba(17,85,152,0.406) 0%, #00A3FA 100%);
        border-image: linear-gradient(270deg, rgba(17, 85, 152, 0.406) 0%, #00A3FA 100%) 1;
        margin-bottom: 8px;
      }

      .img {
        //width: 104px;
        //height: 120px;
        width: 104px;
        height: 59px;
        //border: 1px solid red;

        img {
          width: 100%;
          height: auto;
          max-height: 59px;
          object-fit: contain;
        }
      }

      .info {
        line-height: 24px;
        margin-top: 4px;
        &--item {
          display: flex;

          &__icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            position: relative;
            top: 4px;

            &.name {
              background-image: url('@/assets/images/armyScreen/门禁记录_姓名@2x.png');
              background-size: cover;
            }

            &.date {
              background-image: url('@/assets/images/armyScreen/门禁记录_时间@2x.png');
              background-size: cover;
            }

            &.location {
              background-image: url('@/assets/images/armyScreen/门禁记录_地址@2x.png');
              background-size: cover;
            }
          }

          &__value {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #D8F0FF;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }

    &__right {
      width: 214px;
      overflow-x: hidden;

      .type {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgb(201, 235, 255, 0.7);
        line-height: 1.5;
        font-weight: 400;

        //border-image: linear-gradient(270deg, rgba(17,85,152,0.406) 0%, #00A3FA 100%);
        border-image: linear-gradient(270deg, rgba(17, 85, 152, 0.406) 0%, #00A3FA 100%) 1;
        margin-bottom: 8px;
      }

      .recodlist {
        width: 220px;

        &--item {
          float: left;
          width: 67px;
          height: 78px;
          margin-right: 6px;
          position: relative;
          margin-bottom: 16px;

          img {
            width: 100%;
            height: auto;
            max-height: 78px;
            object-fit: contain;
          }

          &__outer {
            width: 25px;
            height: 24px;
            background-image: url('@/assets/images/armyScreen/外部人员标签@2x.png');
            background-size: cover;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }
}
</style>
